// 搜索框
let searchContents = document.querySelectorAll('.header-m input');
for(let i = 0; i < searchContents.length; i++) {
	let searchContent = searchContents[i];
	let searchButton = searchContent.nextElementSibling;
	searchButton.onclick = function() {
		let searchValue = searchContent.value.trim();
		if(searchValue) {
			location.href = '/page/user/search/list.html?keyword=' + searchValue;
		} else if(searchContent.placeholder != '搜索商品') {
			location.href = '/page/user/search/list.html?keyword=' + searchContent.placeholder;
		}
	}
	searchContent.onkeydown = function(e) {
		e = e || window.event;
		if(e.keyCode == 13 || e.keyCode == 108) {
			// 回车键
			searchButton.click();
		}
	}
}
/* 闲置物品轻松卖效果 start*/
let indexSlider = document.getElementById('indexSlider');
let sliderPrev = document.getElementById('sliderPrev');
let sliderNext = document.getElementById('sliderNext');
let timeId = null;
const animateTime = 500;
const intervalTime = 5000;
/*

hiden-front   prev    active    after    hiden-back
img4          img1    img2      img3     img4
-415          0       415       830      1245

*/
/*
	功能：替换className
	第一个参数：目标元素
	第二个参数：新的className，
	第三个参数：要被替换的oldName，oldName必须位于原className的最后面，
		若为空则把newClassName追加在后面
		若找不到则把newClassName追加在后面
*/
function repalceClassName(element, newClassName, oldClassName) {
	if(!oldClassName) {
		element.className = element.className + newClassName;
	}
	let className = element.className;
	let index = className.indexOf(oldClassName);
	if(index == -1) {
		element.className = element.className + newClassName;
	} 
	className = className.substring(0, index);
	className = className + newClassName;
	element.className = className;
}
/*
	功能：作为定时器函数
*/
function intervalEvent() {
	let hidenBackGoods = indexSlider.querySelector('.slider-hiden-back'); // 后面的隐藏区
	if(hidenBackGoods) {
		hidenBackGoods.style.transition = 'all 500ms ease-in-out 0s';
		let prevGoods = indexSlider.querySelector('.slider-prev');
		let activeGoods = indexSlider.querySelector('.slider-active');
		let afterGoods = indexSlider.querySelector('.slider-after');
		let hidenFrontGoods = indexSlider.querySelector('.slider-hiden-front');
		repalceClassName(prevGoods, 'slider-hiden-front', 'slider-prev');
		let prevGoodsClassName = prevGoods.className;
		let imgName = prevGoodsClassName.substring(0, 11);
		hidenFrontGoods.className = imgName + ' slider-hiden-front';
		repalceClassName(activeGoods, 'slider-prev', 'slider-active');
		repalceClassName(afterGoods, 'slider-active', 'slider-after');
		repalceClassName(hidenBackGoods, 'slider-after', 'slider-hiden-back'); 
		setTimeout(() => {
			prevGoods.style.transition = 'none';
			flag = repalceClassName(prevGoods, 'slider-hiden-back', 'slider-hiden-front');
		}, animateTime);
	}
}
timeId = setInterval(intervalEvent, intervalTime);
sliderPrev.onclick = function() {
	let hidenFrontGoods = indexSlider.querySelector('.slider-hiden-front'); // 前面的隐藏区
	if(hidenFrontGoods) {
		hidenFrontGoods.style.transition = 'all 500ms ease-in-out 0s';
		let prevGoods = indexSlider.querySelector('.slider-prev');
		let activeGoods = indexSlider.querySelector('.slider-active');
		let afterGoods = indexSlider.querySelector('.slider-after');
		let hidenBackGoods = indexSlider.querySelector('.slider-hiden-back');
		repalceClassName(prevGoods, 'slider-active', 'slider-prev');
		repalceClassName(activeGoods, 'slider-after', 'slider-active');
		repalceClassName(afterGoods, 'slider-hiden-back', 'slider-after');
		let afterGoodsClassName = afterGoods.className;
		let imgName = afterGoodsClassName.substring(0, 11);
		hidenBackGoods.className = imgName + ' slider-hiden-back';
		repalceClassName(hidenFrontGoods, 'slider-prev', 'slider-hiden-front');
		setTimeout(() => {
			afterGoods.style.transition = 'none';
			flag = repalceClassName(afterGoods, 'slider-hiden-front', 'slider-hiden-back');
		}, animateTime);
		if(timeId) {
			clearInterval(timeId);
			timeId = null;
		}
		setTimeout(() => {
			if(!timeId) {
				timeId = setInterval(intervalEvent, intervalTime);
			}
		}, animateTime);
	}
}

sliderNext.onclick = function() {
	intervalEvent();
	if(timeId) {
		clearInterval(timeId);
		timeId = null;
	}
	setTimeout(() => {
		if(!timeId) {
			timeId = setInterval(intervalEvent, intervalTime);
		}
	}, animateTime);
}
indexSlider.onmouseover = function() {
	if(timeId) {
		clearInterval(timeId);
		timeId = null;
	}
}
indexSlider.onmouseout = function() {
	if(!timeId) {
		timeId = setInterval(intervalEvent, intervalTime);
	}
}

/* 监听页面滚动 */
/*
	功能：解决获取页面滚动距离兼容性问题
*/
function getScrollTop() {
	return document.body.scrollTop || document.documentElement.scrollTop;
}
let headerMove = document.getElementById('headerMove'); // 头部移动栏
let elevator = document.getElementById('elevator'); // 右侧移动栏
let popular = document.getElementById('popular');
/*
 * 	加载首页商品展示内容
 * 
 * */
let loadingImg = document.createElement('img');
ajax({
	type: 'post',
	url: '/goods/getIndexContents',
	async: true,
	beforeSend: function() {
		loadingImg.src = '/images/loading.gif';
		loadingImg.className = 'loading';
		popular.parentNode.appendChild(loadingImg);
	},
	success: function(xhr) {
		loadingImg.remove();
		let arg = JSON.parse(xhr.responseText);
		let dataArr = arg.data;
		// 手机
		let goodsDetailed11 = document.createElement('div');
		goodsDetailed11.className = 'goods-detailed-item';
		goodsDetailed11.innerHTML = `<h4 class="detailed-h">手机</h4>
					<ul class="clearfix">
					</ul>`;
		// 电脑
		let goodsDetailed12 = document.createElement('div');
		goodsDetailed12.className = 'goods-detailed-item';
		goodsDetailed12.innerHTML = `<h4 class="detailed-h detailed-p">电脑</h4>
					<ul class="clearfix">
					</ul>`;
		// 音响
		let goodsDetailed2 = document.createElement('div');
		goodsDetailed2.className = 'goods-detailed-item';
		goodsDetailed2.innerHTML = `<h4 class="detailed-h">音响</h4>
			<ul class="clearfix">
			</ul>`;
		// 键盘
		let goodsDetailed3 = document.createElement('div');
		goodsDetailed3.className = 'goods-detailed-item';
		goodsDetailed3.innerHTML = `<h4 class="detailed-h">键盘</h4>
			<ul class="clearfix">
			</ul>`;
		// 运动系列
		let goodsDetailed4 = document.createElement('div');
		goodsDetailed4.className = 'goods-detailed-item';
		goodsDetailed4.innerHTML = `<h4 class="detailed-h">运动系列</h4>
			<ul class="clearfix">
			</ul>`;
		// 衣物
		let goodsDetailed5 = document.createElement('div');
		goodsDetailed5.className = 'goods-detailed-item';
		goodsDetailed5.innerHTML = `<h4 class="detailed-h">衣物</h4>
			<ul class="clearfix">
			</ul>`;
		// 二手书
		let goodsDetailed6 = document.createElement('div');
		goodsDetailed6.className = 'goods-detailed-item';
		goodsDetailed6.innerHTML = `<h4 class="detailed-h">二手书</h4>
			<ul class="clearfix">
			</ul>`;
		// 车子
		let goodsDetailed7 = document.createElement('div');
		goodsDetailed7.className = 'goods-detailed-item';
		goodsDetailed7.innerHTML = `<h4 class="detailed-h">车子</h4>
			<ul class="clearfix">
			</ul>`;
		dataArr.forEach(data => {
			if(data.type == '手机') {
				setGoodsDetalis(goodsDetailed11, data);
			} else if(data.type == '电脑') {
				setGoodsDetalis(goodsDetailed12, data);
			} else if(data.type == '音响') {
				setGoodsDetalis(goodsDetailed2, data);
			} else if(data.type == '键盘') {
				setGoodsDetalis(goodsDetailed3, data);
			} else if(data.type == '运动系列') {
				setGoodsDetalis(goodsDetailed4, data);
			} else if(data.type == '衣物') {
				setGoodsDetalis(goodsDetailed5, data);
			} else if(data.type == '二手书') {
				setGoodsDetalis(goodsDetailed6, data);
			} else if(data.type == '车子') {
				setGoodsDetalis(goodsDetailed7, data);
			} 
		});
		let mainGoods = document.createElement('div');
		mainGoods.id = 'electronicGoods';
		mainGoods.className = 'main-goods';
		mainGoods.innerHTML = `<h3 class="goods-title">电子产品</h3>
			<a href="/page/user/search/list.html?keyword=手机" class="main-more">查看更多></a>
			<div class="main-goods-detailed">
			</div>`;
		mainGoods.children[2].appendChild(goodsDetailed11);
		mainGoods.children[2].appendChild(goodsDetailed12);
		popular.parentNode.appendChild(mainGoods);
		setMainGoods(goodsDetailed2, '影音娱乐', "/page/user/search/list.html?keyword=音响");
		setMainGoods(goodsDetailed3, '数码配件', "/page/user/search/list.html?keyword=键盘");
		setMainGoods(goodsDetailed4, '运动健身', "/page/user/search/list.html?keyword=运动");
		setMainGoods(goodsDetailed5, '衣物鞋帽', "/page/user/search/list.html?keyword=衣物鞋帽");
		setMainGoods(goodsDetailed6, '图书教材', "/page/user/search/list.html?keyword=书");
		setMainGoods(goodsDetailed7, '交通出行', "/page/user/search/list.html?keyword=车");
		let divEnd = document.createElement('div');
		divEnd.className = 'main-end';
		divEnd.innerHTML = `<em>END</em>`;
		popular.parentNode.appendChild(divEnd);
		
		// 电子产品
		let electronicGoods = document.getElementById('electronicGoods');
		let electronicElevator = document.getElementById('electronicElevator');
		// 其他
		let videoGoods = electronicGoods.nextElementSibling;
		let digitalGoods = videoGoods.nextElementSibling;
		let motionGoods = digitalGoods.nextElementSibling;
		let clothingGoods = motionGoods.nextElementSibling;
		let bookGoods = clothingGoods.nextElementSibling;
		let trafficGoods = bookGoods.nextElementSibling;

		let videoElevator = electronicElevator.nextElementSibling;
		let digitalElevator = videoElevator.nextElementSibling;
		let motionElevator = digitalElevator.nextElementSibling;
		let clothingElevator = motionElevator.nextElementSibling;
		let bookElevator = clothingElevator.nextElementSibling;
		let trafficElevator = bookElevator.nextElementSibling;

		const specialLoc = popular.offsetTop + popular.offsetHeight -40; // 显示右侧移动栏的位置
		
		document.onscroll = function() {
			let scrollTop = getScrollTop();
			if(scrollTop >= 195) {
				headerMove.style.display = 'block';
				if(scrollTop > trafficGoods.offsetTop - 60) {
					setElevatorActive(trafficElevator);
				} else if(scrollTop > bookGoods.offsetTop - 60){
					setElevatorActive(bookElevator);
				} else if(scrollTop > clothingGoods.offsetTop - 60){
					setElevatorActive(clothingElevator);
				} else if(scrollTop > motionGoods.offsetTop - 60){
					setElevatorActive(motionElevator);
				} else if(scrollTop > digitalGoods.offsetTop - 60){
					setElevatorActive(digitalElevator);
				} else if(scrollTop > videoGoods.offsetTop - 60){
					setElevatorActive(videoElevator);
				} else if(scrollTop > electronicGoods.offsetTop - 60){
					setElevatorActive(electronicElevator);
				}
			} else {
				headerMove.style.display = 'none';
			}
			if(scrollTop > specialLoc) {
				elevator.style.display = 'block';
			} else {
				elevator.style.display = 'none';
			}
		}
		electronicElevator.onclick = function() {
			elevatorClick(electronicGoods);
		}
		videoElevator.onclick = function() {
			elevatorClick(videoGoods);
		}
		digitalElevator.onclick = function() {
			elevatorClick(digitalGoods);
		}
		motionElevator.onclick = function() {
			elevatorClick(motionGoods);
		}
		clothingElevator.onclick = function() {
			elevatorClick(clothingGoods);
		}
		bookElevator.onclick = function() {
			elevatorClick(bookGoods);
		}
		trafficElevator.onclick = function() {
			elevatorClick(trafficGoods);
		}

	}
});

/*
 *	设置商品详情 
 *	参数1：父级元素
 *	参数2：商品数据
 * 
 */
function setGoodsDetalis(parentEle, data) {
	let li = document.createElement('li');
	li.innerHTML = `<a href="${data.url}">
						<img src="${data.imgPath}" alt="${data.type}" />
						<p>${data.details}</p>
						<span>${data.price}</span>
					</a>`;
	parentEle.children[1].appendChild(li);
}

/**
 * 设置商品列表
 * 参数1：goodsList
 * 参数2：商品类型
 * 参数3：查看更多跳转url
 * 
 * */
function setMainGoods(goodsDetailed, type, url) {
	let mainGoods = document.createElement('div');
	mainGoods.className = 'main-goods';
	mainGoods.innerHTML = `<h3 class="goods-title">${type}</h3>
		<a href="${url}" class="main-more">查看更多></a>
		<div class="main-goods-detailed">
		</div>`;
	mainGoods.children[2].appendChild(goodsDetailed);
	popular.parentNode.appendChild(mainGoods);
}


/*
	功能：作为右侧滑动栏点击事件
	参数：右侧滑动栏子项对应于的main区域
*/
function elevatorClick(element) {
	let loc = element.offsetTop - 30;
	scrollTo(0, loc);
	setElevatorActive(element);
}

/*
 *	设置当前elevator样式 
 *	参数1：当前elevator
 *
 */
function setElevatorActive(elevator) {
	if(elevator.className.indexOf('on') == -1) {
		removeStyle(elevator.parentNode, 'on');
		elevator.className = elevator.className + ' on';
	}
}



